{% extends 'layout/pure_manage.html' %}
{% load dashboard %}
{% load issues %}
{% load static %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .badge {
            display: inline-block;
            min-width: 10px;
            padding: 3px 7px;
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            background-color: #EE5757;
            border-radius: 10px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 17px;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .table-right > tbody > tr > td.label-left {
            width: 90px;
        }

        .table-right > tbody > tr > td {
            border: 0;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .top-10 .table > tbody > tr > td {
            border-top: 0;
            border-bottom: 1px solid #ddd;
        }
    </style>

{% endblock %}

{% block content %}
    <audio id="notifyAudio" hidden="hidden">
        <source src="{% static 'web/audio/notify.mp3' %}" type="audio/mpeg">
        您的浏览器不支持 audio 与元素。
    </audio>
    <div class="container-fluid" style="margin-top: 20px">
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-history" aria-hidden="true"></i>
                        系统信息 {{ sys_size }} 条

                    </div>
                    <div class="panel-body top-10">
                        <table class="table"
                               style="word-wrap:break-word;word-break:break-all;height: 300px;min-height: 100vh;display: block;overflow-y: scroll;">
                            <tbody>
                            {#                            <span class="label label-default"> Label</span>#}
                            {#                            <span class="label label-default label-success"> Label</span>#}
                            {#                            <span class="label label-default label-danger"> Label</span>#}
                            {#                            <span class="label label-default label-primary"> Label</span>#}
                            {% for key,item in sysinfos.items %}

                                {#                                                                {{ key }}#}
                                {#                                {{ item }}#}
                                <tr>

                                    <td class="col-xs-4">
                                        <a onclick="status({{ key }})">
                                            <label class="label label-default {% if item.status == 1 %}label-danger{% else %}label-left{% endif %}"
                                                   for="">from:<label>{{ item.sender }}</label></label></a>


                                        {% if item.avatar %}
                                            {#                                            <img class="avatar" src="{{ item.avatar }}" alt="">#}
                                        {% else %}
                                            {#                                            <div class="avatar">{{ item.creator.0|upper }}</div>#}
                                        {% endif %}
                                    </td>
                                    <td class="col-xs-8">
                                        <a onclick="status({{ key }})"><label
                                                style="color: {% if item.status == 1 %}hotpink{% else %}darkgray{% endif %}">
                                            {% if item.pure_link %}<a href="{{ item.pure_link }}"
                                                                      onclick="status({{ key }})"
                                                                      style="color: {% if item.status == 1 %}dodgerblue;text-decoration: underline dotted{% else %}darkgray{% endif %}"
                                                                      target="_blank">{{ item.pure_content }}</a>{% else %}
                                                {{ item.content }}{% endif %}
                                        </label></a>
                                        {% if item.type == 1 %}
                                            <div>{{ item.creator }}</div>
                                            <label>
                                                创建了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                            </label>
                                            <label style="width: 300px;">
                                                创建于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 2 %}
                                            <div>{{ item.creator }}</div>
                                            <label>更新了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label>【{{ item.title }}】</label>
                                                <label>{{ item.desc }}</label>
                                            </label>
                                            <label style="width: 300px;">
                                                更新于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 3 %}
                                            <div>{{ item.creator }}</div>
                                            <label>回复了 {% if item.reply_to %}{{ item.reply_to }}{% endif %}
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                                <br>
                                                >> <label style="text-overflow: ellipsis;">{{ item.desc }}</label>
                                            </label>
                                            {#                                            <div>指派#}
                                            {#                                                给 {{ item.assign }}#}
                                            {#                                            </div>#}
                                            <label style="width: 300px;">
                                                回复于:{{ key }}
                                            </label>

                                        {% endif %}

                                    </td>

                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default" id="remindInfoDiv">
                    <div class="panel-heading">
                        <i class="fa fa-history" aria-hidden="true"></i>
                        提醒信息 {{ hint_size }} 条
                        <a style="float: right" href="javascript:void(0)" onclick="setAllHintReaded()">[全部已读]</a>
                    </div>
                    <div class="panel-body top-10">
                        <table class="table"
                               style="word-wrap:break-word;word-break:break-all;height: 300px;min-height: 100vh;display: block;overflow-y: scroll;">
                            <tbody>
                            {#                            <span class="label label-default"> Label</span>#}
                            {#                            <span class="label label-default label-success"> Label</span>#}
                            {#                            <span class="label label-default label-danger"> Label</span>#}
                            {#                            <span class="label label-default label-primary"> Label</span>#}
                            {% for key,item in hints.items %}


                                {#                                                                {{ key }}#}
                                {#                                {{ item }}#}
                                <tr>

                                    <td class="col-xs-4">
                                        <a onclick="status({{ key }})">
                                            <label class="label label-default {% if item.status == 1 %}label-danger{% else %}label-left{% endif %}"
                                                   for="">from:<label>{{ item.sender }}</label></label></a>


                                        {% if item.avatar %}
                                            {#                                            <img class="avatar" src="{{ item.avatar }}" alt="">#}
                                        {% else %}
                                            {#                                            <div class="avatar">{{ item.creator.0|upper }}</div>#}
                                        {% endif %}
                                    </td>
                                    <td class="col-xs-8">
                                        <a onclick="status({{ key }})"><label
                                                style="color: {% if item.status == 1 %}hotpink{% else %}darkgray{% endif %}">
                                            {% if item.pure_link %}<a href="{{ item.pure_link }}"
                                                                      onclick="status({{ key }})"
                                                                      style="color: {% if item.status == 1 %}dodgerblue;text-decoration: underline dotted{% else %}darkgray{% endif %}"
                                                                      target="_blank">{{ item.pure_content }}</a>{% else %}
                                                {{ item.content }}{% endif %}
                                        </label></a>
                                        {% if item.type == 1 %}
                                            <div>{{ item.creator }}</div>
                                            <label>
                                                创建了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                            </label>
                                            <label style="width: 300px;">
                                                创建于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 2 %}
                                            <div>{{ item.creator }}</div>
                                            <label>更新了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label>【{{ item.title }}】</label>
                                                <label>{{ item.desc }}</label>
                                            </label>
                                            <label style="width: 300px;">
                                                更新于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 3 %}
                                            <div>{{ item.creator }}</div>
                                            <label>回复了 {% if item.reply_to %}{{ item.reply_to }}{% endif %}
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                                <br>
                                                >> <label style="text-overflow: ellipsis;">{{ item.desc }}</label>
                                            </label>
                                            {#                                            <div>指派#}
                                            {#                                                给 {{ item.assign }}#}
                                            {#                                            </div>#}
                                            <label style="width: 300px;">
                                                回复于:{{ key }}
                                            </label>

                                        {% endif %}

                                    </td>

                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-history" aria-hidden="true"></i>
                        信息 {{ info_size }} 条
                    </div>
                    <div class="panel-body top-10">
                        <table class="table"
                               style="word-wrap:break-word;word-break:break-all;height: 300px;min-height: 100vh;display: block;overflow-y: scroll;">
                            <tbody>
                            {% for key,item in top_ten.items %}
                                {#                                                                {{ key }}#}
                                {#                                {{ item }}#}
                                <tr>
                                    <td style="width: 46px;">
                                        {% if item.avatar %}
                                            <img class="avatar" src="{{ item.avatar }}" alt="">
                                        {% else %}
                                            <div class="avatar">{{ item.creator.0|upper }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if item.type == 1 %}
                                            <div>{{ item.creator }}</div>
                                            <label>
                                                创建了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                            </label>
                                            <label style="width: 300px;">
                                                创建于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 2 %}
                                            <div>{{ item.creator }}</div>
                                            <label>更新了
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label>【{{ item.title }}】</label>
                                                <label>{{ item.desc }}</label>
                                            </label>
                                            <label style="width: 300px;">
                                                更新于:{{ key }}
                                            </label>
                                        {% endif %}
                                        {% if item.type == 3 %}
                                            <div>{{ item.creator }}</div>
                                            <label>回复了 {% if item.reply_to %}{{ item.reply_to }}{% endif %}
                                                <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.issue_id %}">{% string_just item.issue_id %}</a>
                                                {#                                            给 {{ item.assign.username }}#}
                                                <label style="text-overflow: ellipsis;">【{{ item.title }}】</label>
                                                <br>
                                                >> <label style="text-overflow: ellipsis;">{{ item.desc }}</label>
                                            </label>
                                            {#                                            <div>指派#}
                                            {#                                                给 {{ item.assign }}#}
                                            {#                                            </div>#}
                                            <label style="width: 300px;">
                                                回复于:{{ key }}
                                            </label>

                                        {% endif %}

                                    </td>

                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <input id="csrf_token" value="{{ csrf_token }}" hidden="hidden"/>
    <input id="project_id" value="{{ request.web.project.id }}" hidden="hidden"/>
    <input id="user_id" value="{{ request.web.user.id }}" hidden="hidden"/>
    <input id="username" value="{{ request.web.user.username }}" hidden="hidden"/>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        function status(key) {
            $.ajax({
                url: "{% url 'remind_status' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    "id": key,
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        location.reload();
                        {#$("#badge").load(location.href + " #badge")#}
                    } else {

                    }
                }

            })

        }

        var project_id = eval(document.getElementById("project_id").value);
        var user_id = eval(document.getElementById("user_id").value);
        var username = document.getElementById("username").value;

        var interval_timer = null;//计时器
        var timer_count = 0;
        const position = 'workbench';
        var wsUrl = 'ws://' + window.location.host + '/chat/ws/' + project_id + '/' + user_id + '/' + username
        var ws;

        createOrConnectWebSocket();	// 创建websocket
        /**
         * 创建websocket或掉线重连
         */
        function createOrConnectWebSocket() {
            var count = 0
            if (!ws) {
                ws = new WebSocket(wsUrl);
                websocketInit();
            } else {
                if (!isOnlineCurrUser() && count < 100) {
                    count++
                    ws = null;
                    createOrConnectWebSocket();
                }
            }
            // 开启定时器
            init_start_timer();
        }

        /**
         * websocket 的初始化
         */
        function websocketInit() {
            ws.onmessage = function (e) {
                console.log('evt e ', e)
                var data = JSON.parse(e.data);
                console.log('>>>>>', data.type)
                if (data.type == 'userlist.message') {
                    let userlistval = eval(data.message);
                    console.log(userlistval)
                    return
                } else if (data.type == 'private.message') {
                    var message = data['message'];
                    console.log('private.message:',message)
                    {#document.querySelector('#chat-log').innerHTML += ('<label style="color: hotpink">' + message + '</label>' + '<br>');#}
                    {#localStorage.setItem((user_id+'_'+project_id)+'mychatLog' + project_id, document.querySelector('#chat-log').innerHTML)#}
                    const notify_audio = document.getElementById('notifyAudio')
                    notify_audio.play();
                    {#document.querySelector('#chat-log').scrollTop = document.querySelector('#chat-log').scrollHeight;#}
                     $("#badge").load(location.href + " #badge")
                     $("#remindInfoDiv").load(location.href + " #remindInfoDiv")

                } else {
                    var message = data['message'];
                    console.log('message:',message)
                    {#document.querySelector('#chat-log').innerHTML += (message + '<br>');#}
                    {#localStorage.setItem((user_id + '_' + project_id) + 'mychatLog' + project_id, document.querySelector('#chat-log').innerHTML)#}
                    {#document.querySelector('#chat-log').scrollTop = document.querySelector('#chat-log').scrollHeight;#}
                }
            };
            ws.onclose = function (e) {
                console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
            };

        }

        /**
         * 设置一个 30秒的轮询监听方法，避免页面关闭
         */
        function init_start_timer() {
            //重置计数器
            timer_count = 0;
            if (interval_timer != null) {
                clearInterval(interval_timer);
                interval_timer = null;
            }
            interval_timer = setInterval(function () {
                myTimer()
            }, 10000);
        }

        /**
         *定时器具体实现方法
         */
        function myTimer() {
            //TODO 如果超过半小时没有交互，则关闭计时器
            if (timer_count >= 300000) {
                clearInterval(interval_timer);
            } else {
                timer_count += 30;
                createOrConnectWebSocket()
                {#var online = '{"type":"timer","user_id":" + ' + user_id + '}';#}
                {% comment %}   while (!isOnlineCurrUser()) {
                       {#createOrConnectWebSocket()#}
                       console.log('my timer reconnect ws')
                   }{% endcomment %}
                {#ws.send(online);#}
                console.log('timer_count', timer_count);
            }
        }

         /**
         * 判断当前用户是否 还在线
         */
        function isOnlineCurrUser() {
            if (ws) {
                if (ws.readyState == WebSocket.OPEN) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }

        function setAllHintReaded(){
            layer.msg('set all hint readed')
            $.ajax({
                type: "POST",
                url: "{% url 'remind_readed_all' project_id=request.web.project.id %}",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        location.reload();
                        $("#badge").load(location.href + " #badge")
                    } else {

                    }
                }
            })
        }
    </script>
{% endblock %}